/* 
 * 功能：vxe-grid 列拖动
 * 参数：
 */
import Sortable from "sortablejs";

export default {
    inserted: (el, binding, vnode, oldVnode) => {
        let xTable = vnode.child;   //VueComponent实例
        Sortable.create(
            el.querySelector(
                ".body--wrapper>.vxe-table--header .vxe-header--row"
            ),
            {
                handle: ".vxe-header--column:not(.col--fixed)",
                onEnd: ({ item, newIndex, oldIndex }) => {
                    let { fullColumn, tableColumn } = xTable.getTableColumn();
                    let targetThElem = item;
                    let wrapperElem = targetThElem.parentNode;
                    let newColumn = fullColumn[newIndex];
                    if (newColumn.fixed) {
                        // 错误的移动
                        if (newIndex > oldIndex) {
                            wrapperElem.insertBefore(
                                targetThElem,
                                wrapperElem.children[oldIndex]
                            );
                        } else {
                            wrapperElem.insertBefore(
                                wrapperElem.children[oldIndex],
                                targetThElem
                            );
                        }
                        this.$XModal.message({
                            message: "固定列不允许拖动！",
                            status: "error"
                        });
                    }
                    // 转换真实索引
                    let oldColumnIndex = xTable.getColumnIndex(tableColumn[oldIndex]);
                    let newColumnIndex = xTable.getColumnIndex(tableColumn[newIndex]);
                    // 移动到目标列
                    let currRow = fullColumn.splice(oldColumnIndex, 1)[0];
                    fullColumn.splice(newColumnIndex, 0, currRow);
                    xTable.loadColumn(fullColumn);
                }
            }
        );
    }
}